<template>
	<!-- 组件描述：传入props有实际大图片src、占位图placeholder，过渡时间duration -->
	<div class="image-loader-container">
		<img :src="placeholder" v-if="!isTransitionEnd" class="placeholder" alt="图片缺失" />
		<img
			:src="src"
			alt="图片缺失"
			@load="handleImgLoad"
			@transitionend="handleTransitionEnd"
			:style="{ opacity: isLoaded ? 1 : 0, transition: `all ${duration}ms` }"
		/>
	</div>
</template>

<script>
export default {
	name: 'ImageLoader',
	emits: ['load'],
	props: {
		src: {
			type: String,
			required: true,
		},
		placeholder: {
			type: String,
			required: true,
		},
		duration: {
			type: Number,
			default: 1000,
		},
	},
	data() {
		return {
			isLoaded: false,
			isTransitionEnd: false,
		}
	},
	methods: {
		handleImgLoad() {
			this.$emit('load')
			this.isLoaded = true
		},
		handleTransitionEnd() {
			this.isTransitionEnd = true
		},
	},
}
</script>

<style lang="less" scoped>
@import '~@/styles/mixins/mixin.less';
.image-loader-container {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		.abs-full();
	}
	.placeholder {
		filter: blur(2vw);
	}
}
</style>
